import { createApp } from 'vue'
import { createPinia } from "pinia"
import './style.css'
import App from './App.vue'
import router from './router'

// 初始化pinia
const pinia = createPinia();
// 创建app
const app = createApp(App);
// 挂在到app实例上
app.use(pinia);
// 挂载路由
app.use(router);
// 定义自定义指令
app.directive('color', {
    // 当被绑定的元素插入到 DOM 中时...
    mounted(el, binding) {
        const { color, backgroundColor } = binding.value
        el.style.color = color; // 设置元素的颜色为传入的值
        el.style.backgroundColor = backgroundColor;
    },
    // 只调用一次，指令第一次绑定到元素时调用
    beforeMount(el, binding) {
        const { color, backgroundColor } = binding.value
        el.style.color = color; // 对于远程数据变化的支持
        el.style.backgroundColor = backgroundColor;
    },
    // 当传入的值变化时调用
    updated(el, binding) {
        const { color, backgroundColor } = binding.value
        el.style.color = color; // 更新颜色
        el.style.backgroundColor = backgroundColor;
    },
});

// 挂在dom节点
app.mount('#app');
